<template>
	<div id="" style="font-size: 0.4rem;">
		<van-row id="set_top">
			<van-col span="2" @click="goback">
				<van-icon name="arrow-left" />
			</van-col>
			<van-col span="4" offset="8">设置</van-col>
		</van-row>
		<div id="set-top-box">
			<van-row id="cont_" v-if="userInfo">
				<van-col span="8">
					<img :src="userInfo.headerImg">
				</van-col>
				<van-col span="12" id="con">
					<div style="margin-top: 2vh;">
						{{userInfo.nickName}}
					</div>
					<div id="" style="font-size: 0.3rem;margin-top: 1vh;">
						云鹤九霄 龙腾四海
					</div>
				</van-col>
				<van-col span="2" style="margin-top: 5vh;" offset="2">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<div id="" v-else style="text-align: center;">
				未登录
			</div>
			<van-row style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;"
				@click="$router.push('/Address')">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">我的收货地址</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
		</div>
		<!--  -->
		<div id="set-top-box">
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">账户与安全</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">支付</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
		</div>
		<div id="set-top-box">
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">消息通知</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">隐私</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">通用</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
		</div>
		<div id="set-top-box">
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">帮助与反馈</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row
				style="width: 98vw;height: 5vh;border-bottom: 1px solid #F4F4F4;line-height: 5vh;padding-top: 2vh;">
				<van-col span="7" offset="1" style="font-size: 0.3rem;">关于果粉</van-col>
				<van-col span="2" offset="14">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
		</div>
		<div id="set_bottom">
			<van-button id="set_bottom_button">切换账户</van-button>
		</div>
		<div id="set_bottom" @click="outLogin">
			<van-button id="set_bottom_button">退出登录</van-button>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		created() {
			const userInfo = JSON.parse(localStorage.getItem('login'))
			this.userInfo = userInfo
		},
		methods: {
			outLogin() {
				Dialog.confirm({
						message: '确认退出登录吗',
					})
					.then(() => {
						localStorage.removeItem('login')
						this.$router.push('/Login')
					})
					.catch(() => {
						// on cancel
					});

			},
			goback() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style>
	#set-top-box {
		width: 98vw;
		margin-left: 1vw;
		box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;
		margin-top: 2vh;
		font-size: 0.4rem;
		text-align: left;
		/* padding-left: 2vw; */
	}

	#set_top {
		font-size: 0.4rem;
		padding-top: 2vh;
		width: 96vw;
	}

	#cont_ {
		text-align: left;
		font-size: 0.4rem;
		border-bottom: 1px solid #F4F4F4;
		width: 98vw;
	}

	#cont_ img {
		width: 60%;
		height: 8vh;
		margin-top: 1vh;
		/* margin-left: 3vw; */
		border-radius: 100%;
	}

	#set_bottom {
		width: 98vw;
		margin-left: 1vw;
		margin-top: 2vh;
	}

	#set_bottom #set_bottom_button {
		width: 98vw;
		border-radius: 10px;
		color: #FFFFFF;
		background: #1E1E1E;
	}

	.van-button--default {
		background: #FFFFFF;
		color: #000000;
	}
</style>
